<template>
  <div>

    <!-- 1.页头 -->
    <my-header v-if="page.headerIsShow"></my-header>

    <!-- 2.搜索输入框 -->
    <div v-show="search.isShow" class="search w">
      <el-collapse-transition>
        <div style="width:80%;margin:10px auto">
          <el-input placeholder="不管多远...我都会找到你..." v-model="search.keyWord" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchProduct"></el-button>
          </el-input>
        </div>
      </el-collapse-transition>
    </div>

    <!-- 2.顶部商品种类一级菜单 -->
    <div class="note-tab">
      <ul class="note-tab-item">
        <!-- 触发显示隐藏页头图标 -->
        <li style="display: inline-block; cursor: pointer;" class="fa fa-hourglass-1" @click="page.headerIsShow=!page.headerIsShow"></li>
        <!-- 一级商品种类列表 -->
        <li v-for="(category,index) in firstCategorys" :key="index">
          <a href="javascript:void(0);" :class="{active: clickCategoryIndex==category.id}" @click="clickFirstCategory(category.id);breadcrumbMsg=category.productCategoryName">{{category.productCategoryName}}</a>
        </li>
        <!-- 触发显示隐藏搜索输入框的图标 -->
        <li style="display: inline-block; cursor: pointer;" class="fa fa-search" @click="search.isShow=!search.isShow"></li>
        <!-- 触发显示隐藏搜索页尾的图标 -->
        <li style="display: inline-block; cursor: pointer;" class="fa fa-hourglass-end" @click="page.footerIsShow=!page.footerIsShow"></li>
      </ul>
    </div>

    <!-- 2.二級商品种类的面包屑 -->
    <breadcrumb class="w user-breadcrumb">
      <span slot="message">{{breadcrumbMsg}}</span>
    </breadcrumb>

    <!-- 3.二级的商品种类 -->
    <div class="w content">
      <el-row :gutter="15">
        <el-col class="content-item" :span="6" v-for="(secondCategory,index) in secondCategorys.slice(small,big)" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img v-lazy="secondCategory.imageHost+secondCategory.imageAddress" :key="secondCategory.imageHost+secondCategory.imageAddress" class="image">
            <div style="padding: 14px;">
              <span>{{secondCategory.productCategoryName}}</span>
              <div class="bottom clearfix">
                <div class="time">{{secondCategory.createTime}}</div>
                <el-button type="primary" size="mini" round class="button" @click="clickSeconCate(secondCategory.id);breadcrumbCateMsg=secondCategory.productCategoryName">瞧-瞧</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination class="pagination-content" small layout="prev, next" :total="pagination.total" :page-size="pagination.pageSize" @prev-click="clickPre" @next-click="clickNext">
      </el-pagination>
    </div>

    <!-- 4.二級商品种类下的商品的面包屑 -->
    <breadcrumb class="w user-breadcrumb" v-if="productList.length>0">
      <span slot="message">{{breadcrumbMsg}} | {{breadcrumbCateMsg}} </span>
    </breadcrumb>

    <!-- 5.商品的价格排序开关按钮 -->
    <div class="w" style="margin-bottom: 7px" v-if="productList.length>0">
      <el-tooltip content="价格升降序" placement="right" style="float:left;">
        <el-switch v-model="search.descOrAsc" @change='priceOrder' active-color="#409EFF" inactive-color="#67C23A" active-value="promotion_price_desc" inactive-value="promotion_price_asc">
        </el-switch>
      </el-tooltip>
    </div>

    <!-- 6.商品列表 -->
    <div class="w product-content">
      <el-row :gutter="15">
        <el-col class="content-item" :span="6" v-for="(product,index) in productList" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" class="p-card">
            <img v-lazy="product.imageHost+product.mainImage" :key="product.imageHost+product.mainImage" class="image" @click='clickProfuctImages(product.id)'>
            <div style="padding: 14px;">
              <span style="font-size:15px">{{product.productName}}</span>
              <div class="bottom clearfix">
                <div class="product-price-con" style="text-align:center;font-size:14px;color:#409eff;margin:2px">
                  <span class="product-price">
                    <del class="del-normalPricE">
                      ￥ {{product.promotionPrice}}
                    </del>
                  </span>
                </div>
                <div class="product-price-con" style="text-align:center;font-size:14px;margin:2px">
                  <span class="product-price">
                    ￥ {{product.normalPrice}}
                  </span>
                </div>
                <div class="time" style="text-align:left;font-size:10px">{{product.createTime}}</div>
                <div class="seller-img" style="float:right">
                  <img v-if="product.ownerImagesUrl" style="width:20px;height:20px; border-radius: 50%" v-lazy="product.ownerImagesUrl" :key="product.ownerImagesUrl" alt="">
                  <div v-else> <i style="width:20px;height:20px" class="fa fa-user-o"></i></div>
                </div>
                <div class="seller-name" style="text-align:right;padding-top:5px">
                  <span>{{product.ownerName}}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 如果商品列表为空 -->
      <div v-if="productList.length == 0" class="none-p">
        <p class="err-tips">商品空空如也！</p>
      </div>
      <!-- 商品列表分页 -->
      <el-pagination v-if="productList.length>0" class="pagination-content" small layout="prev,pager, next" :total="ProductPagination.total" :page-size="ProductPagination.pageSize" @prev-click="clickProPre" @next-click="clickProNext" @current-change="clickProPage">
      </el-pagination>
    </div>

    <!-- 7 页脚 -->
    <my-footer v-if="page.footerIsShow && productList.length>0" style="bottom: 0px; width: 100%;"></my-footer>

  </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import Category from "@/service/category-service";
import Product from "@/service/product-service";
import Tips from "@/utils/tipsUtil";
const _category = new Category();
const _tips = new Tips();
const _product = new Product();

export default {
  data() {
    return {
      page: {
        headerIsShow: false, //页头默认不显示
        footerIsShow: false //页尾默认不显示
      },

      //搜索
      search: {
        keyWord: "", //搜索输入框的关键字
        isShow: false, //搜索输入框是否显示
        descOrAsc: "promotion_price_desc" //价格排序搜索
      },

      //二级商品种类分页导航
      pagination: {
        pageNum: 1, //当前的页数
        pageSize: 4, //页面大小
        total: 0 //总的条数
      },
      small: 0, //二级商品种类的最小标志
      big: 0, //二级商品种类的最大标志

      ProductPagination: {
        pageNum: 1, //当前的页数
        pageSize: 8, //页面大小
        total: 0 //总的条数
      },

      SecondcategoryId: "", //缓存二级商品种类id
      firstCategorys: [], //缓存一级商品种类
      secondCategorys: [], //缓存二级种类商品种类
      productList: [], //缓存商品列表信息
      clickCategoryIndex: 0, //缓存一级商品中类的id
      breadcrumbMsg: "", //二级商品种类的面包屑提示信息
      breadcrumbCateMsg: "" //商品列表的提示信息
    };
  },
  components: {
    Breadcrumb,
    MyHeader,
    MyFooter
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 1.初始化获取一级的商品种类列表信息
     */
    init() {
      const vue = this;
      const categoryParentId = 0;
      _category.getCategoryByParentId(categoryParentId).then(
        res => {
          vue.firstCategorys = res.data;
          //取出一级商品种类的第一个的商品种类id然后发送请求获取该id下二级商品种类
          if (vue.firstCategorys[0] && vue.firstCategorys[0].id) {
            vue.clickFirstCategory(vue.firstCategorys[0].id);
          }
          //缓存一级商品种类的第一个商品种类的名称
          if (
            vue.firstCategorys[0] &&
            vue.firstCategorys[0].productCategoryName
          ) {
            vue.breadcrumbMsg = vue.firstCategorys[0].productCategoryName;
          }
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 2.点击了一级的商品种类
     */
    clickFirstCategory(categoryid) {
      const vue = this;
      //清除商品列表信息缓存
      vue.breadcrumbCateMsg = "";
      vue.productList = [];

      //重置分割二级商品种类列表的标志
      vue.small = 0;
      vue.clickCategoryIndex = categoryid;
      _category.getCategoryByParentId(categoryid).then(
        res => {
          vue.secondCategorys = res.data;
          vue.pagination.total = vue.secondCategorys.length;
          vue.big =
            vue.pagination.total >= vue.pagination.pageSize
              ? vue.pagination.pageSize
              : vue.pagination.total;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 3.点击二级商品种类分页组件前一页触发的事件
     */
    clickPre() {
      const vue = this;
      vue.big -= vue.pagination.pageSize;
      vue.small -= vue.pagination.pageSize;
    },

    /**
     * 4.点击二级商品种类分页组件的下一页的触发的事件
     */
    clickNext() {
      const vue = this;
      vue.big += vue.pagination.pageSize;
      vue.small += vue.pagination.pageSize;
      vue.big =
        vue.pagination.total >= vue.big ? vue.big : vue.pagination.total;
    },

    /**
     * 5.点击商品分页组件的上一页
     */
    clickProPre() {
      this.ProductPagination.pageNum--;
      this.getProducts();
    },

    /**
     * 6.点击商品分页组件的下一页
     */
    clickProNext() {
      this.ProductPagination.pageNum++;
      this.getProducts();
    },

    /**
     *7.点击商品分页组件的页码
     */
    clickProPage(page) {
      this.ProductPagination.pageNum = page;
      this.getProducts();
    },

    /**
     * 8.点击二级商品种类触发的事件
     */
    clickSeconCate(categoryId) {
      const vue = this;
      //缓存
      vue.SecondcategoryId = categoryId;
      vue.getProducts();
    },

    /**
     *9.获取商品列表
     */
    getProducts() {
      const vue = this;
      const data = {
        categoryId: vue.SecondcategoryId,
        pageNum: vue.ProductPagination.pageNum,
        pageSize: vue.ProductPagination.pageSize
      };
      _product.getProducts(data).then(
        res => {
          vue.productList = res.data.list;
          vue.ProductPagination.total = res.data.total;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    },

    /**
     * 10.点击商品图片路由调整到商品详情页面
     */
    clickProfuctImages(id) {
      this.$router.push({ path: "/product", query: { id: id } });
    },

    /**
     * 11.搜索商品
     */
    searchProduct() {
      const vue = this;
      const keyword = vue.search.keyWord;
      if (keyword) {
        const data = {
          keyword: keyword,
          pageNum: vue.ProductPagination.pageNum,
          pageSize: vue.ProductPagination.pageSize
        };
        vue.requestProducts(data);
      } else {
        //搜索输入框为空的提示
        vue.$message("空空如也 不找了---");
        return;
      }
    },

    /**
     * 12.价格排序开关切换
     */
    priceOrder() {
      const vue = this;
      const keyword = vue.search.keyWord;
      const data = {
        keyword: keyword,
        orderBy: vue.search.descOrAsc,
        categoryId: vue.SecondcategoryId,
        pageNum: vue.ProductPagination.pageNum,
        pageSize: vue.ProductPagination.pageSize
      };
      vue.requestProducts(data);
    },

    /**
     * *************************************************
     *公共方法:模糊搜索商品类列表信息
     */
    requestProducts(data) {
      const vue = this;
      _product.getProducts(data).then(
        res => {
          vue.productList = res.data.list;
          vue.ProductPagination.total = res.data.total;
          //修改面包屑的提示信息
          vue.breadcrumbMsg = "为你找到了";
          vue.breadcrumbCateMsg = vue.search.keyWord;
        },
        err => {
          _tips.notifyTips(vue, err.msg);
        }
      );
    }
  }
};
</script >

<style scoped lang="scss">
.note-tab {
  padding-top: 21px;

  width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid #eee;
  .note-tab-item {
    padding-top: 21px;
    width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    font-family: "PingFang SC", "微软雅黑";
    li {
      display: inline-block;
      margin-left: 10px;
      height: 100%;
      line-height: 45px;
      a {
        color: #000;
      }
      .active {
        font-size: 19px;
        color: #409eff;
      }
    }
  }
}
//zhuti
.content,
.product-content {
  .content-item {
    margin-top: 5px;
    margin-bottom: 5px;
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 4px 7px;
      float: right;
      margin-top: 8x;
    }

    .image {
      width: 100%;
      height: 266px;
      display: block;
      cursor: pointer;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    // 商品列表中的商品卡片
    .p-card:hover {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      -ms-transition-duration: 0.5s;
      -o-transition-duration: 0.5s;
      transition-duration: 0.5s;
    }
  }
  .pagination-content {
    height: 50px;
    line-height: 50px;
    margin-top: 10px;
  }
}
</style>
